<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				height: 100%;
				overflow: hidden;
				background: pink;
			}
			
			#clock {
				background: gray;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate3d(-50%, -50%, 0);
			}
		</style>
	</head>

	<body>
		<canvas id="clock" width="400" height="400"></canvas>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var canvas = document.querySelector("#clock");
			if(!canvas.getContext) return;
			var ctx = canvas.getContext("2d");

			function move() {
				ctx.save();

				/*
				 * 这一部分是定义一个全局的连段的宽度
				 * 颜色
				 * 线段头尾是圆的
				 * */
				ctx.lineWidth = 8;
				ctx.strokeStyle = "black";
				ctx.lineCap = "round"
				/*移动坐标原点到中心*/
				ctx.translate(200, 200);
				/*原作为什么要转90度? 因为初始的角度是在3点钟方向*/
				ctx.rotate(-90*Math.PI/180);

				ctx.beginPath();

				// 外层空心圆盘
				ctx.save();
				/*这里覆盖掉全局的线段样式*/
				ctx.strokeStyle = "blueviolet"
				ctx.lineWidth = 14;
				ctx.beginPath();
				ctx.arc(0, 0, 140, 0, 360 * Math.PI / 180);
				ctx.stroke();
				ctx.restore();

				// 时针刻度
				ctx.save();
				for(var i = 0; i < 12; i++) {
					ctx.rotate(30 * Math.PI / 180);
					ctx.beginPath();
					ctx.moveTo(100, 0);
					ctx.lineTo(120, 0);
					ctx.stroke();
				}
				ctx.restore();

				// 分针刻度
				ctx.save();
				ctx.lineWidth = 6
				ctx.strokeStyle = "red";
				for(var i = 0; i < 60; i++) {
					if(i % 5 != 0) {
						ctx.beginPath();
						ctx.moveTo(110, 0);
						ctx.lineTo(120, 0);
						ctx.stroke();
						ctx.closePath();
					}

					/*这一句要放在这里，上面第一根不让画，那么就先转6度*/
					ctx.rotate(6 * Math.PI / 180);
				}
				ctx.restore();

				// 时针 分针 秒针 
				var date = new Date();
				var hours = date.getHours();
				var minutes = date.getMinutes();
				var seconds = date.getSeconds();

				// 时针
				hours = hours > 12 ? (hours - 12): hours;
				ctx.save();
				ctx.rotate(hours*30*Math.PI/180);
				ctx.lineWidth=10;
				ctx.beginPath();
				ctx.moveTo(0,0);
				ctx.lineTo(40,0);				
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
				
				// 分针
				ctx.save();
				ctx.rotate(minutes*6*Math.PI/180);
				ctx.lineWidth=5;
				ctx.beginPath();
				ctx.moveTo(0,0);
				ctx.lineTo(80,0);				
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
				
				// 秒针
				ctx.save();
				ctx.rotate(seconds*6*Math.PI/180);
				ctx.lineWidth=5;
				ctx.strokeStyle="red"
				ctx.beginPath();
				ctx.moveTo(0,0);
				ctx.lineTo(100,0);				
				ctx.stroke();
				ctx.closePath();
				ctx.restore();

				ctx.closePath();
				ctx.restore();
			}

			setInterval(function() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				move();
			}, 1000);
		}
	</script>

</html>